<template>
    <div>
        <p>加法结果: {{ addResult }}</p>
        <p>减法结果: {{ subResult }}</p>
        <p>乘法结果: {{ mulResult }}</p>
        <p>除法结果: {{ divResult }}</p>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {
    preciseAdd,
    preciseSubtract,
    preciseMultiply,
    preciseDivide,
    formatResult,
} from '../../utils/mathUtils';

const addResult = ref<string>('');
const subResult = ref<number>(0);
const mulResult = ref<string>('');
const divResult = ref<number>(0);

onMounted(() => {
    // 加法示例 (0.1 + 0.2)
    const sum = preciseAdd(0.1, 0.2);
    addResult.value = formatResult(sum, { decimals: 4 }) as string;

    // 减法示例 (1 - 0.9)
    const difference = preciseSubtract(1, 0.9);
    subResult.value = formatResult(difference, { returnNumber: true }) as number;

    // 乘法示例 (0.6 * 3)
    const product = preciseMultiply(0.6, 3);
    mulResult.value = formatResult(product) as string; // 默认保留2位小数

    // 除法示例 (10 / 3)
    const quotient = preciseDivide(10, 3);
    divResult.value = formatResult(quotient, {
        decimals: 6,
        returnNumber: true
    }) as number;
});
</script>
